<template>
  <div :class="className" :style="{height:height,width:width}" />
</template>

<script>
  import echarts from 'echarts'
  require('echarts/theme/macarons') // echarts theme
  import resize from './resize'
  import 'echarts-liquidfill'
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '100%'
      },
      autoResize: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        chart: null,
        value: 0.12,
        data: [0.12, 0.12, 0.12, 0.12, 0.12]
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$el, 'macarons')
        this.chart.setOption({
          backgroundColor: '#101e44',
          title: {
            text: '传感器在线率',
            textStyle: {
              fontWeight: 'normal',
              fontSize: 20,
              color: 'rgb(97, 142, 205)'
            }
          },
          series: [{
            type: 'liquidFill',
            radius: '70%',
            center: ['50%', '55%'],
            data: [0.5, 0.5, 0.5, 0.5, 0.5],
            backgroundStyle: {
              borderWidth: 5,
              borderColor: '#1daaeb',
              color: '#55ceff'
            },
            label: {
              normal: {
                formatter: (0.5 * 100).toFixed(2) + '%',
                textStyle: {
                  fontSize: 30
                }
              }
            }

          }]
        }
        )
      }
    }
  }
</script>

<style scoped>

</style>
